﻿{% extends "gma/base.html" %}
{% load static %}
{% load mytag %}


<!-- CONTENT
  =====================================================================-->

{% block content %}

<div class="page__bd">
    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__bd">
            {% for video in videos %}
            <a class="weui-media-box weui-media-box_appmsg weui-cell_access" href="{% url 'gma:auth_video' video.id %}">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb avatar" src="{{ video.cover_url|cdn }}" alt="">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">{{ video.id }}</h4>
                    <p class="weui-media-box__desc">{{ video.add_time|date:"Y-m-d H:i:s" }}</p>
                </div>

                <div class="weui-cell__ft">
                    {% if video.auth_status == 1 %}
                        <span style="vertical-align:middle; font-size: 17px;">等待审核</span>
                        <i class="weui-icon-warn"></i>
                    {% elif video.auth_status == 2 %}
                        <span style="vertical-align:middle; font-size: 17px;">审核被拒</span>
                        <i class="weui-icon-cancel"></i>
                    {% elif video.auth_status == 3 %}
                        <span style="vertical-align:middle; font-size: 17px;">{{ video.price }} <i class="fa fa-gem"></i> </span>
                        <i class="weui-icon-success"></i>
                    {% else %}
                        <span style="vertical-align:middle; font-size: 17px;">???</span>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
</div>

{% if permissions.system_config.open %}
<div class="weui-btn-area" id="container">
    <a class="weui-btn weui-btn_block weui-btn_primary" type="button" id="uploadFile">1. 选择文件</a>

    <div class="weui-progress" style="height: 20px">
        <div class="weui-progress__bar">
            <div class="weui-progress__inner-bar js_progress" id="upload_progress_bar" style="width: 0%;"></div>
        </div>
{#        <a href="javascript:;" class="weui-progress__opr">#}
{#            <i class="weui-icon-cancel"></i>#}
{#        </a>#}
    </div>

    <a class="weui-btn weui-btn_block weui-btn_primary" type="button" id="startUpload">2. 开始上传</a>
</div>
{% endif %}

<div class="page__ft">
    <a href="{% url 'gma:home' %}">
        <span class="bottom-logo">
           HiBao
       </span>
    </a>
</div>

{% endblock content %}


<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}
<script type="text/javascript" src="{% static 'js/plupload.full.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/qiniu.min.js' %}"></script>
<script>

    let g_upload_token = '';
    var uploader = Qiniu.uploader({
        disable_statistics_report: true,                                    // 禁止自动发送上传统计信息到七牛，默认允许发送
        runtimes: 'html5,flash,html4',                                      // 上传模式，依次退化
        browse_button: 'uploadFile',                                        // 上传选择文件的点选按钮，必需
        container: 'container',                                             // 上传区域DOM ID，默认是browser_button的父元素
        max_file_size: '20mb',                                              // 最大文件体积限制
        flash_swf_url: '/static/common/qiniu/Moxie.swf',                    // 引入flash，相对路径
        dragdrop: false,                                                    // 关闭可拖曳上传
        chunk_size: '4mb',                                                  // 分块上传时，每块的体积

        // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置,
        // uptoken是上传凭证，由其他程序生成;
        // uptoken_url是提供了获取上传凭证的地址，
        // 如果需要定制获取uptoken的过程则可以设置uptoken_func;
        // 其优先级为uptoken > uptoken_url > uptoken_func
        // uptoken: getTokenMessage().token,
        // uptoken: g_upload_token,
        uptoken_func: function(file){    // 在需要获取 uptoken 时，该方法会被调用
            return g_upload_token;
        },

        domain: 'http://video.res.mqnetswork.com/',                         // bucket域名，下载资源时用到，必需
        get_new_uptoken: true,                                              // 设置上传文件的时候是否每次都重新获取新的uptoken
        auto_start: false,                                                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
        max_retries: 3,                                                     // 上传失败最大重试次数
        save_key: false,                                                    //为false则以上传文件的原名命名，否则随机命名，这里推荐false
        init: {
            'FilesAdded': function(up, files) {                             // 文件添加进队列后，处理相关的事情
                plupload.each(files, function(file) {
                    console.log(file);
                    $("#filename").val(file.name)
                });
            },
            'BeforeUpload': function(up, file) {                            // 每个文件上传前，处理相关的事情
                console.log("开始上传之前");
            },
            'UploadProgress': function(up, file) {                          // 每个文件上传时，处理相关的事情
                console.log("上传中");
                $("#upload_progress_bar").css("width",file.percent+'%');
                {#$("#upload_progress_bar").html(file.percent+'%');#}
            },
            'FileUploaded': function(up, file, info) {                       // 每个文件上传成功后，处理相关的事情
                console.log("上传成功");
                $(".bar").html('上传成功！');
                var domain = up.getOption('domain');
                console.log(file);
                console.log(info);
                var res = $.parseJSON(info.response);
                var sourceLink = domain + res.key;
                console.log(`link is ${sourceLink}`);
                {#$("#versionLink").val(sourceLink);#}
                createVideoRecord({{ user.id }}, sourceLink);
            },
            'Error': function(up, err, errTip) {
                console.log("上传出错");
                show_toast("上传出错:" + errTip);
            },
            'UploadComplete': function() {
                //队列文件处理完毕后，处理相关的事情
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效
                var timestamp = Date.parse(new Date());
                var key = "{{ user.id }}_" + timestamp;
                return key;
            }
        }
    });

    function getTokenMessage() {
        var token = {};
        let url = "{% url 'gma:api_get_qiniu_video_upload_token' %}";
        let data = {};
        new my_ajax(url, data, '', '', (data, message) => {
            token.token = data['token'];
            g_upload_token = token.token;
            uploader.start();
        });
        return token;
    }

    function createVideoRecord(uid, video_url) {
        var token = {};
        let url = "{% url 'gma:api_upload_video_for_caster' %}";
        let data = {
            'uid': uid,
            'video_url': video_url,
        };
        new my_ajax(url, data, '', '', (data, message) => {
            show_toast("上传成功!");
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        });
        return token;
    }

    document.getElementById('startUpload').onclick = function() {
        getTokenMessage();
    };
</script>

{% endblock extra_js %}